<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>


<script type="text/javascript" src="https://lib.baomitu.com/vue/2.6.12/vue.min.js"></script>
</head>
<body>
	<div id="app">
		<h1>自定义组件</h1>
		<my-btn :name="btnName" mycolor="red" @click="testClick"></my-btn>
		
	</div>
	<script type="text/javascript">
	// 自定义组件名（属性）不能使用驼峰命名法， 原因： HTML语法 大小写忽略
	Vue.component('my-btn', {
		// 组件元素 template 定义组件构成的dom元素
		// 自定义属性
		props : ['name','mycolor'], 
		template : 
			`<button type="button" @click="btnClick"
				:style="{color : mycolor ,
					     width : mywidth}">
				<img src="../images/IconTexto_WebDev_009.jpg"
					style="height:26px"></img>
				{{name}}
			 </button>`,
		// 自定 数据
		data(){
			return { mywidth : "200px" }		 
		},
		
		methods : {
			btnClick(){
				// 触发自定义组件点击事件click
				this.$emit("click");
			}	
		}
		
		/**
			data : {
				width : "200px"
			}
		
		*/
			 
			 
	});
	
	
	var v = new Vue({
		el : "#app",
		data : {
			btnName : "测试发送"
		},
		methods: {
			testClick(){
				alert(100)
			}
		},
		
	})
	</script>
	

</body>
</html>